import { ref } from 'vue'
// vue-router提供的一个监听方法
import { useRoute, onBeforeRouteUpdate,useRouter } from 'vue-router'
// 引入usevue里面的useCookie方法
import { useCookies } from '@vueuse/integrations/useCookies'

export function useTabList() {
  const route = useRoute()
  const router = useRouter()

  const cookie = useCookies()

  // 修改了使其更语义化
  // route.path拿到当前的path,主要是为了做一个刷新页面默认停留在首页的功能
  const activeTab = ref(route.path)
  const tabList = ref([
    {
      title: '首页',
      path: '/'
    }
  ])

  // 添加标签导航的方法
  function addTab(tab) {
    // 判断传过来的tab值有没有跟它相等的
    // 如果没有找到相等的（==-1）就代表没有
    let noTab = tabList.value.findIndex((t) => t.path == tab.path) == -1
    if (noTab) {
      // 如果没有，那就push最新的对象进去
      tabList.value.push(tab)
    }
    // 存储cookie
    cookie.set('tabList', tabList.value)
  }

  // 初始化标签导航列表,再次刷新也不会重新初始化标签栏
  function initTabList() {
    let tabs = cookie.get('tabList')
    if (tabs) {
      tabList.value = tabs
    }
  }

  initTabList()

  onBeforeRouteUpdate((to, from) => {
    // 设置激活状态，就选中当前标签页当前标签页就处于active
    activeTab.value = to.path
    // 能拿到path和title
    // console.log({title:to.meta.title,path:to.path})
    // 添加路由
    addTab({
      title: to.meta.title,
      path: to.path
    })
  })

  // 改变标签页改变页面功能事件
  const changeTab = (t) => {
    // 能拿到path值
    console.log(t)
    router.push(t)
    // 当前激活状态等于t
    activeTab.value = t
  }

  // 点击关闭的时候执行的事件
  const removeTab = (t) => {
    // 能拿到path的值
    console.log('adasadadadadada',t)
    // 接收导航的数组
    let tabs = tabList.value
    let a = activeTab.value
    // 如果关闭的是当前激活的这个,如果是，那就要去拿当前激活的上一个或者下一个
    if (a == t) {
      tabs.forEach((tab, index) => {
        // 标签对象中某个path值，是否跟我们点击关闭的path值一样，如果是就找到索引，然后index+1或者index-1
        if (tab.path == t) {
          // 有就拿下一个，没有就上一个
          const nextTab = tabs[index + 1] || tabs[index - 1]
          // 如果有nextTab,就把当前的激活值设为nextTab的path
          if (nextTab) {
            a = nextTab.path
          }
        }
      })
    }
    // 赋值给当前激活的值，即可能是下一个或者上一个，或自动触发changeTab事件，然后自动跳转
    activeTab.value = a
    // 过滤，判断每个path值，只要不等于当前要关闭的，就可以将其留下来
    tabList.value = tabList.value.filter((tab) => tab.path != t)
    // 更新cookie存储
    cookie.set('tabList', tabList.value)
    router.push(a);
  }

  // handleClose事件
  const handleClose = (c) => {
    // 能拿到刚才写的两个值，clearAll和clearOther
    // console.log(c)
    if (c == 'clearAll') {
      // 标签激活状态切换为首页
      activeTab.value = '/'
      // 过滤只剩下首页
      tabList.value = [
        {
          title: '首页',
          path: '/'
        }
      ]
    } else if (c == 'clearOther') {
      // 过滤只剩下首页和当前页
      tabList.value = tabList.value.filter(
        (tab) => tab.path == '/' || tab.path == activeTab.value
      )
    }
    cookie.set('tabList', tabList.value)
  }

  return {
    activeTab,
    tabList,
    changeTab,
    removeTab,
    handleClose
  }
}
